<template>
	<view class="home-content">
		<image src="/static/home/top-bg.jpg" mode="widthFix" class="top-bg"></image>
		<CustomNav :custom="custom" :title="'优化营商环境'" :topBgColor="topBgColor" :color="'#fff'"></CustomNav>
		<view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+20)+'rpx'" class="search-block">
			<view class="input-block">
				<view class="iconfont icon-sousuo"></view>
				<input placeholder-style="color:#efefef" placeholder="请输入关键字"/>
			</view>
		</view>
		<view class="title-block">
			<view class="title">优化营商环境</view>
			<view class="title">助力高质量发展</view>
			<view class="sub-title">瓜州县优化企业开办服务</view>
		</view>
		<view class="content-block">
			<view class="nav-block">
				<navigator hover-class="none" :url="item.url" v-for="(item,index) in nav" :key="item.id" class="nav-item">
					<image :src="item.icon" class="nav-icon"></image>
					<view class="nav-name">{{item.name}}</view>
				</navigator>
			</view>
			<image @click="toInviteInvestment" class="banner" mode="widthFix" src="https://pic.imgdb.cn/item/63100fc416f2c2beb1191e53.png"></image>
			<view class="menu-block">
				<view class="left-menu">
					<image @click="toDetail" mode="widthFix" src="https://pic.imgdb.cn/item/63100f6d16f2c2beb118e53d.jpg" class="menu-item"></image>
				</view>
				<view class="right-menu">
					<image @click="toBid" mode="widthFix" src="https://pic.imgdb.cn/item/63100f7e16f2c2beb118edac.jpg" class="menu-item"></image>
					<image @click="toPrice" mode="widthFix" src="https://pic.imgdb.cn/item/63100f8816f2c2beb118f233.jpg" class="menu-item"></image>
				</view>
			</view>
			<view class="policy-block">
				<view class="condition-block">
					<view class="title">营商政策</view>
					<view class="label">类型：</view>
					<picker :range="policyCategory" range-key="value" @change="bindPolicyCategory">{{policyCategory[policyCategoryIndex].value}}</picker>
					<view class="iconfont icon-xiala"></view>
				</view>
				<view class="list-block">
					<navigator hover-class="none" url="/pages/policy/detail" v-for="(item,index) in newsList" :key="item.id" class="list-item">
						<view class="title">
							<view :style="(index+1)>3?'visibility:hidden':''" class="fire iconfont icon-huo"></view>
							<view class="value">{{item.title}}</view>
						</view>
						<view class="time">发布日期：{{item.time}}</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				custom:null,
				nav:[
					{id:1,name:'我要举报',icon:'/static/home/menu_1.png',url:''},
					{id:2,name:'评价点评',icon:'/static/home/menu_2.png',url:'/pages/evaluation/rank'},
					{id:3,name:'问卷调查',icon:'/static/home/menu_3.png',url:'/pages/questionnaire/index'},
					{id:4,name:'意见建议',icon:'/static/home/menu_4.png',url:'/pages/advice/index'},
					{id:5,name:'项目进度',icon:'/static/home/menu_5.png',url:'/pages/project/index'},
					{id:6,name:'曝光台',icon:'/static/home/menu_6.png',url:'/pages/lighthouse/index'},
					{id:7,name:'办事指南',icon:'/static/home/menu_7.png',url:'/pages/guidance/index'},
					{id:8,name:'审批事项查询',icon:'/static/home/menu_8.png',url:'/pages/accraditation/index'},
				],
				policyCategory:[
					{id:1,value:'招商引资'},
				],
				policyCategoryIndex:0,
				newsList:[
					{id:1,title:'甘肃省司法厅出台法治化优化营商环境二十条措施',time:'2022.08.04'},
					{id:2,title:'优化营商环境  激活市场主体——多项政策举措解',time:'2022.08.04'},
					{id:3,title:'优化营商环境  激活市场主体——多项政策举措解',time:'2022.08.04'},
					{id:4,title:'优化营商环境  激活市场主体——多项政策举措解',time:'2022.08.04'},
				],
				topBgColor:'rgba(0,0,0,0)'
			}
		},
		methods:{
			bindPolicyCategory(e){
				this.policyCategoryIndex=e.detail.value;
			},
			toBid(){
				uni.navigateTo({
					url:'/pages/bid/index'
				})
			},
			toPrice(){
				uni.navigateTo({
					url:'/pages/price/index'
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/guidance/detail'
				})
			},
			toInviteInvestment(){
				uni.navigateTo({
					url:'/pages/invite_investment/index'
				})
			}
		},
		onPageScroll(e) {
			if(e.scrollTop>=190){
				//this.topBgColor='linear-gradient(to right,#656ef9,#7f3ee4)'
				this.topBgColor='#086df3'
			}else{
				this.topBgColor='rgba(0,0,0,0)';
			}
		},
		onLoad(){
			this.custom=this.utils.getCustomNavData();
		}
	}
</script>

<style lang="scss" scoped> 
	.home-content{
		overflow: hidden;
		.top-bg{
			width: 100%;
			position: absolute;
		}
		.search-block{
			position: relative;
			width: 100%;
			height: 60rpx;
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.input-block{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				border: 1px solid #fff;
				border-radius: 40rpx;
				padding:0 10rpx;
				height: 60rpx;
				.iconfont{
					flex-grow: 0;
					color: #fff;
					margin: 0 10rpx;
				}
				input{
					flex-grow: 1;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
		.title-block{
			height: 320rpx;
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			padding:0 40rpx;
			justify-content: center;
			.title{
				font-size: 44rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 10rpx;
				letter-spacing: 4rpx;
			}
			.sub-title{
				color: #fff;
				font-size: 24rpx;
			}
		}
		.content-block{
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 30rpx;
			background: #fff;
			border-radius: 30rpx 30rpx 0 0;
			.nav-block{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.nav-item{
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 30rpx;
					.nav-icon{
						width: 70rpx;
						height: 70rpx;
						border-radius: 20rpx;
						margin-bottom: 18rpx;
					}
					.nav-name{
						font-size: 26rpx;
					}
				}
			}
			.banner{
				width: 100%;
			}
			.menu-block{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				.left-menu,.right-menu{
					width: calc(50% - 10rpx);
					display: flex;
					flex-direction: column;
				}
				.left-menu{
					margin-right: 20rpx;
					.menu-item{
						width: 100%;
					}
				}
				.right-menu{
					.menu-item{
						width: 100%;
					}
					.menu-item:first-child{
						margin-bottom: 16rpx;
					}
				}
			}
			.policy-block{
				display: flex;
				flex-direction: column;
				width: 100%;
				background: #fff;
				box-shadow:0 0 10px 3px #efefef;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 20rpx;
				.condition-block{
					display: flex;
					flex-direction: row;
					align-items: center;
					.title{
						font-size: 38rpx;
						font-weight: bold;
						margin-right: 20rpx;
					}
					.label,picker{
						font-size: 28rpx;
						color: #999;
					}
					.iconfont{
						margin-left: 10rpx;
						font-size: 32rpx;
						color: #9fa6b3;
					}
				}
				.list-block{
					display: flex;
					flex-direction: column;
					.list-item{
						.title{
							margin-top: 20rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							.fire{
								color:#fc5a00;
								font-size: 38rpx;
								width: 40rpx;
								height: 40rpx;
							}
							.value{
								overflow: hidden;
								text-overflow:ellipsis;
								white-space: nowrap;
								font-size: 28rpx;
							}
						}
						.time{
							width: calc(100% - 80rpx);
							margin:0 auto;
							font-size: 24rpx;
							color: #999;
							border-bottom: 1px solid #efefef;
							margin-top: 20rpx;
							padding-bottom: 20rpx;
						}
					}
					.list-item:last-child{
						.time{
							border: none;
						}
					}
				}
			}
		}
	}
</style>